<template>
	<view class="container">
		<uni-card :is-shadow="false" is-full>
			<text class="uni-h2">家长代请假</text>
		</uni-card>
		<uni-section title="发起请假" type="line">
			<view class="example">
				<!-- 基础用法，不包含校验规则 -->
				<uni-forms ref="baseForm" :modelValue="leaveData" label-position="top">
					<uni-forms-item label="请假学生" required>
						<uni-easyinput v-model="childName" disabled />
					</uni-forms-item>
					<uni-forms-item label="请假类型" required>
						<uni-data-select v-model="leaveData.type" :localdata="types" @change="changeType">
						</uni-data-select>
					</uni-forms-item>
					<uni-forms-item label="起止时间" required>
						<view class="example-body">
							<uni-datetime-picker v-model="datetimerange" type="datetimerange" rangeSeparator="至"
								:start="start" hide-second returnType="timestamp" />
						</view>
					</uni-forms-item>
					<uni-forms-item label="请假事由" required>
						<uni-easyinput type="textarea" v-model="leaveData.text" placeholder="请输入请假事由" />
					</uni-forms-item>
					<button type="primary" @click="submit()">提交</button>
				</uni-forms>
			</view>
		</uni-section>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				leaveData: {
					studentId: 0,
					type: '',
					startTime: '',
					finishTime: '',
					text: ''
				},
				childName: '',
				// 请假类型
				// value: 0,
				types: [{
						value: "事假",
						text: "事假"
					},
					{
						value: "病假",
						text: "病假"
					}
				],
				// 请假时间
				datetimerange: [],
				start: Date.now(),

			}
		},
		onLoad(option) {
			console.log("option : ", option)
			this.childName = option.childName;
		},
		methods: {
			// 更改请假类型
			changeType(e) {
				console.log(e)
			},
			submit() {
				this.leaveData.studentId = uni.getStorageSync('studentId');
				this.leaveData.startTime = this.datetimerange[0];
				this.leaveData.finishTime = this.datetimerange[1];
				console.log(this.leaveData)
				if (!this.leaveData.type) {
					uni.showToast({
						title: '请选择请假类型',
						icon: 'none'
					})
					return;
				} else if (!this.leaveData.startTime || !this.leaveData.finishTime) {
					uni.showToast({
						title: '请选择请假时间',
						icon: 'none'
					})
					return;
				}else if(!this.leaveData.text){
					uni.showToast({
						title: '请填写请假事由',
						icon: 'none'
					})
					return;
				}
				this.$myReq({
						url: '/leave/api',
						data: this.leaveData,
						method: 'post'
					})
					.then((res) => {
						console.log(res);
						this.tableData = res.data;
						if (res.code == 200) {
							uni.showToast({
								title: '请假申请成功',
								icon: 'none'
							})
							setTimeout(() => {
								uni.navigateTo({
									url: '../leaveList?childName=' + this.childName
								});
							}, 1000)
						}
					})
			},
			messageToggle(message, type) {
				this.$refs.message.open()
			},
		}
	}
</script>


<style lang="scss">
	.example {
		padding: 15px;
		background-color: #fff;
	}

	.segmented-control {
		margin-bottom: 15px;
	}

	.button-group {
		margin-top: 15px;
		display: flex;
		justify-content: space-around;
	}

	.form-item {
		display: flex;
		align-items: center;
	}

	.button {
		display: flex;
		align-items: center;
		height: 35px;
		margin-left: 10px;
	}
</style>
